<template>
  <view class="wifi-devices">
    <view class="wifi-devices-content">
      <view class="wifi-devices-content-item">
        <view class="wifi-devices-title">
          <text>已配对设备</text>
        </view>
        <view class="wifi-devices-list">
          <view
            class="list-item"
            v-for="(item, index) in selectWifiList"
            :key="index"
            @click="handleSelectWifi(item)"
          >
            <view class="list-item-left">
              <view class="list-item-left-icon" :class="{ active: item.selected }">
                <img
                  src="https://img.alicdn.com/imgextra/i3/1034622205/O1CN01IvMy9z1S9wO4vgaL4_!!1034622205.png"
                  alt=""
                />
              </view>
              <view class="left-text">
                <view class="left-text-top">
                  <text>{{ item.name }}</text>
                  <text
                    :style="{
                      color: item.status == 1 ? '#0091FF' : '#FF0000',
                      backgroundColor: item.status == 1 ? '#E6F3FF' : '#FFF1F1',
                    }"
                  >
                    {{ item.status == 1 ? "正常" : "异常" }}
                  </text>
                </view>
                <view class="left-text-bottom">
                  <img
                    src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01AaIRtg1S9wO6cF61D_!!1034622205.png"
                    alt=""
                  />
                  <text>安全</text>
                </view>
              </view>
            </view>
            <view class="list-item-right">
              <view
                class="list-item-right-btn"
                @click="handleDisconnect(item)"
              >
                <img
                  src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN017Pr8dV1S9wO83krTI_!!1034622205.png"
                  alt=""
                />
                <text>断开</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="wifi-devices-content-item">
        <view class="wifi-devices-title">
          <text>附近可用设备</text>
        </view>
        <view class="wifi-devices-list">
          <view
            class="list-item"
            v-for="(item, index) in wifiList"
            :key="index"
          >
            <view class="list-item-left">
              <view class="list-item-left-icon">
                <img
                  src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01v6W7Bw1S9wO83jSA3_!!1034622205.png"
                  alt=""
                />
              </view>
              <view class="left-text">
                <view class="left-text-top">
                  <text>{{ item.SSID }}</text>
                </view>
                <view class="left-text-bottom">
                  <img
                    src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01AaIRtg1S9wO6cF61D_!!1034622205.png"
                    alt=""
                  />
                  <text>加密</text>
                </view>
              </view>
            </view>
            <view class="list-item-right">
              <view
                class="list-item-right-btn connected"
                @click="handleConnected(item)"
              >
                <text>连接</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getWifiLists, deleteAttendanceWifi, addAttendanceWifi } from "@/api/index";
import { getCurrentLocation } from "@/utils/wifiAuth";
import Taro from "@tarojs/taro";
import { userInfoStore } from "@/stores/userInfoStore";
const store = userInfoStore();
const position = ref();
const errorMsg = ref("");
const loading = ref(false);
const selectWifiList = ref([]);
const wifiList = ref([]);
onMounted(() => {
  handleGetWifiList();
  handleGetWifis();
});
const handleGetWifiList = () => {
  let params = {
    page: 1,
    pageSize: 100,
  };
  getWifiLists(params).then(res => {
    console.log(res);
    selectWifiList.value = res.rows;
  });
};
//断开连接
const handleDisconnect = item => {
  console.log("断开连接");
  deleteAttendanceWifi(item.id).then(res => {
    handleGetWifiList();
    handleGetWifis();
  });
};
// 连接
const handleConnected = item => {
  addAttendanceWifi({
    name: item.SSID,
  }).then(res => {
    handleGetWifiList();
    handleGetWifis();
  });
};
// 获取位置
const handleGetCurrentLocation = async () => {
  getCurrentLocation()
    .then(async location => {
      position.value = location;
      console.log(location, "获取位置成功888");
    })
    .catch(err => {
      console.error("获取位置失败2:", err);
    });
};
// 获取wifiList
const handleGetWifis = async () => {
  console.log("获取Wi-Fi信息");
  Taro.stopWifi();
  try {
    Taro.startWifi({
      success: async function (res) {
        Taro.onGetWifiList(res => {
          wifiList.value = res.wifiList;
          console.log(res, "获取Wi-Fi信息成功");
        });
        Taro.getWifiList();
      },
      fail: function (err) {
        console.log(err, "err6669");
      },
    });
  } catch (err) {
    errorMsg.value = "获取Wi-Fi信息失败566";
  } finally {
    loading.value = false;
  }
};
// 选择wifi后携带回到上一页
const handleSelectWifi = (item: any) => {
  console.log(item);
  // Taro.navigateBack({
  //   delta: 1,
  // });
  // store.selectedWifi = item;
};
</script>

<style lang="less">
@import url(./index.less);
</style>
